<template>
  <!-- <div class="login-body"> -->
  <div class="login-body-div">
    <h1>用 户 注 册</h1>
    <div class="login-body-center">
      <div class="login-item-left">
        <!-- <div class="login-left-img-div"> -->
        <!-- <img src="../../assets/img/login.png" alt="" /> -->
        <div class="login-check-ul-div">
          <ul class="check-ul">
            <!-- <li
              v-for="(item,index) in conditionlist" :key="item" :class="[{'usernamecheck animated pulse' : conditionlist[index].liclass == false}]">
              {{ item.liname }}
            </li> -->

            <li :class="!longcheck ? 'usernamecheck animated pulse' : ''">
              用户名长度在8-16之间
            </li>
            <li :class="!badworkcheck ? 'usernamecheck animated pulse' : ''">
              用户名无敏感词
            </li>
            <li :class="!twostrcheck ? 'usernamecheck animated pulse' : ''">
              至少包含2种符号(英文大小写,数字)
            </li>
            <li :class="!nospecialcheck ? 'usernamecheck animated pulse' : ''">
              用户名无特殊符号(@#$%...)
            </li>
          </ul>
        </div>

        <!-- </div> -->
      </div>
      <div class="login-item">
        <input
          type="text"
          placeholder="请输入账号"
          v-model.trim="username"
          @focus="ischoose"
          @blur="ischoose"
          :class="[
            { 'username-error-input animated shake': iserror == true },
            { onchoose: isonchoose == true },
          ]"
        /><br />
        <input
          type="password"
          placeholder="请输入密码"
          v-model.trim="password"
          @focus="passchoose"
          @blur="passchoose"
          :class="[
            { 'userpass-error-input animated shake': ispass == true },
            { passonchoose: ispassonchooose == true },
          ]"
        /><br />
        <button @click="login" class="login-btn">注&nbsp;&nbsp;&nbsp;册</button>
        <!-- 账号：admin &nbsp;&nbsp;&nbsp;&nbsp;密码：123456 -->
        <span class="tishi-p" @click="goregister()">已有账号？请登录</span>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { ElMessage } from "element-plus";
import { checkregister, registerpush } from "network/request.js";
import { ref } from "vue-demi";

export default {
  name: "LoginView",
  data() {
    return {
      username: "",
      password: "",
      realname: "",
      usersexy: "",
      userimg: "",
      usertitle: "",
      registertime: "",
      level: "游客用户",
      //账号错误判断
      iserror: ref(false),
      //账号选中判断
      isonchoose: ref(false),
      //密码错误判断
      ispass: ref(false),
      ispassonchooose: ref(false),
      conditionlist: [
        { liname: "用户名长度在8-16之间", liclass: this.longcheck },
        { liname: "用户名无敏感词", liclass: this.badworkcheck },
        {
          liname: "至少包含2种符号(英文大小写,数字)",
          liclass: this.twostrcheck,
        },
        { liname: "用户名无特殊符号(@#$%...)", liclass: this.nospecialcheck },
      ],
      wordlist: ["sb", "nc", "fuck", "ikun", "nmsl", "tm"],
      longcheck: true,
      badworkcheck: true,
      twostrcheck: true,
      nospecialcheck: true,
      inputtime: null
    };
  },
  watch: {
    username() {
      //判断是否有敏感词
      for (let i = 0; i < this.wordlist.length; i++) {
        if (this.username.search(this.wordlist[i]) != -1) {
          this.iserror = true;
          this.badworkcheck = true;
          break;
        }
        this.iserror = false;
        if (this.username != "") {
          this.badworkcheck = false;
        } else {
          this.badworkcheck = true;
        }
      }

      //判断用户名长度
      if (this.username.length >= 8 && this.username.length <= 16) {
        this.longcheck = false;
      } else {
        this.longcheck = true;
      }
      //判断用户名是否有特殊字符
      if (/^[A-Za-z0-9]+$/g.test(this.username)) {
        // console.log(123);
        this.nospecialcheck = false;
      } else {
        this.nospecialcheck = true;
      }
      //判断是否有两种字符
      if (
        /([\da-zA-Z]+?[_]+?)|([_]+?[\da-zA-Z]+?)|(\d+?[a-zA-Z]+?)|([a-zA-Z]+?\d+?)/.test(
          this.username
        )
      ) {
        this.twostrcheck = false;
      } else {
        this.twostrcheck = true;
      }
      // if (this.username == "") {
      //   this.badworkcheck = true;
      // } else {
      //   this.badworkcheck = false;
      //   this.iserror = false;
      // }
      // })
      // this.iserror - false
      // if (this.username.search("sb") != -1) {
      //   this.iserror = true;
      // } else {
      //   this.iserror = false;
      // }
    },
    password() {
      if (this.password != "") {
        this.ispass = false;
      }
    },
  },
  computed: {},
  methods: {
    ischoose() {
      this.isonchoose = !this.isonchoose;
    },
    passchoose() {
      this.ispassonchooose = !this.ispassonchooose;
    },
    //随机生成id
    Guid() {
      var guid = "";
      for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if (i == 8 || i == 12 || i == 16 || i == 20) guid += "-";
      }
      return guid;
    },
    userandpass(val) {
      ElMessage.error(val);
      this.ispass = true;
      this.addinpuclass();
      this.inputtime = setTimeout(() => {
        this.ispass = false;
        this.addinpuclass();
      }, 820);
      this.inputtime = null
    },
    async login() {
      //判断是否已经有账号存在
      const { data: res } = await checkregister(this.username);
      // console.log(res);
      if (this.username == "" && this.password == "") {
        this.userandpass("请输入账号密码！")
        return;
      }
      if (this.username == "") {
        ElMessage.error("请输入账号！");
        this.addinpuclass();
        this.inputtime = setTimeout(() => {
          this.addinputclass()
        }, 820);
        this.inputtime = null
        return;
      }
      if (this.password == "") {
        ElMessage.error("请输入密码！");
        this.ispass = true;
        setTimeout(() => {
          this.ispass = false
        }, 820);
        return;
      }
      if (
        this.iserror == true ||
        this.longcheck ||
        this.badworkcheck ||
        this.twostrcheck ||
        this.nospecialcheck
      ) {
        ElMessage.error("请正确输入账号");
        return;
      } else if (res.length == 0) {
        let timer = 3;
        ElMessage.success(`${timer}秒后跳转到登录页面...`);
        let userid = this.Guid();
        let regitime = new Date();
        this.registertime = regitime.toLocaleString();
        let logintime = "";
        let overduetime = ""
        // console.log(this.registertime)
        registerpush(
          userid,
          this.username,
          this.password,
          this.realname,
          this.usersexy,
          this.userimg,
          this.usertitle,
          this.level,
          this.registertime,
          logintime,
          overduetime
        );
        this.username = "";
        this.password = "";
        setTimeout(() => {
          this.$emit("goregister");
        }, 3000);
      } else {
        ElMessage.error("账号已存在！");
        this.addinpuclass();
        this.inputtime = setTimeout(() => {
          this.addinpuclass()
        }, 820);
        this.inputtime = null
      }
    },
    addinpuclass() {
      this.iserror = !this.iserror;
    },
    //发送跳转到login页面
    goregister() {
      this.$emit("goregister");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-body-div {
  // max-width: 700px;
  width: 55%;
  height: 50%;
  margin: 0 auto;
  // background-color: red;
  // overflow: hidden;
}

@media screen and (max-width: 768px) {
  .login-body-div {
    height: 40%;
    width: 70%;
  }
}
@media screen and (min-width: 768px) and (max-width: 821px) {
  .login-body-div {
    width: 90%;
    height: 45%;
  }
}
h1 {
  margin-top: 8%;
  color: whitesmoke;
  text-align: center;
  margin-bottom: 30px;
  font-size: 50px;
  text-shadow: 4px 1px 8px rgb(250, 168, 182);
}
.login-body-center {
  display: flex;
  // max-width: 700px;
  width: 100%;
  height: 100%;
  margin: auto;
  box-shadow: 12px 10px 18px rgb(71, 71, 71);
}
.login-item-left {
  // width: 50%;
  background-color: rgba(255, 255, 255, 0.678);
  flex: 1;
  position: relative;
}
.login-check-ul-div {
  width: 80%;
  height: 60%;
  // margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // background-color: green;
}
.check-ul {
  // background-color: red;
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 5%;
  // margin: auto;
}
.check-ul .usernamecheck {
  color: rgb(120, 207, 120);
}
.check-ul li {
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 600;
  color: #777;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  transform-origin: left top;
  transition: 0.3s linear;
  // background-color: blue;
}
.login-item {
  flex: 1;
  background-color: rgb(32, 39, 61);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // margin-top: 10%;
  // width: 50%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.login-item input {
  border: 0;
  width: 80%;
  height: 45px;
  border-radius: 8px;
  font-size: 18px;
  color: #ccc;
  padding-left: 2%;
  outline: none;
  background-color: rgb(38, 46, 71);
}
.login-item .onchoose {
  border: 2px solid lightskyblue;
}
.login-item .passonchoose {
  border: 2px solid lightskyblue;
}
.login-item .username-error-input {
  border: 2px solid #b22222;
  color: #b22222;
  &::placeholder {
    color: #b22222;
  }
}
.login-item .userpass-error-input {
  border: 2px solid #b22222;
  color: #b22222;
  &::placeholder {
    color: #b22222;
  }
}
.login-btn {
  width: 50%;
  height: 40px;
  border: none;
  color: rgb(166, 221, 255);
  font-size: 14px;
  background-color: rgb(38, 46, 71);
  border: 2px solid rgba(93, 232, 250, 0.5);
  border-radius: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  transform-style: preserve-3d;
  &::after {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: 6px;
    background-color: rgba(93, 232, 250, 0.5);
    transform: scaleX(0);
    transform: rotateZ(-300px);
    transform-origin: left top;
    transition: 0.4s linear;
  }
  &:hover::after {
    color: white;
    transform: scaleX(1);
    transform: rotateZ(-300px);
    background-color: rgba(93, 232, 250, 0.5);
  }
  &:hover {
    color: lightskyblue;
    font-weight: 800;
    transform: rotateZ(300px);
  }
}
input::placeholder {
  padding-left: 8px;
  color: rgb(126, 126, 126);
  font-size: 15px;
}
.tishi-p {
  color: #ccc;
  // margin-top: 20px;
  position: absolute;
  bottom: 1.4em;
  right: 2em;
  font-size: 13px;
  transform-origin: center;
  transition: 0.3s linear;
}

.tishi-p:hover {
  color: orange;
}
@media screen and (max-width: 200px) {
  .tishi-p {
    font-size: 5px;
    width: 100%;
    text-align: center;
    padding-left: 20%;
    // background-color: red;
    display: block;
  }
  .login-item-left {
    display: none;
  }
  h1 {
    font-size: 30px;
  }
}
@media screen and (min-width: 201px) and (max-width: 768px) {
  .tishi-p {
    font-size: 12px;
    bottom: 1.2em;
  }

  .login-item-left {
    display: none;
  }
}
.login-left-img-div {
  background-color: #fff;
  width: 70%;
  height: 70%;
}
img {
  width: 30%;
  height: 30%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>